<template>
	<div class="daoli">
		<div class="container">
			<div class="yue">{{ `${rili.公历年}年${rili.公历月}月` }}</div>
			<div class="ri">
				<div class="xingqi">{{ `${rili.week}` }}</div>
				<div class="nian">{{ `${rili.干支年}年` }}</div>
				<div class="center">
					<div class="num">
						{{ `${rili.公历日}` }} <span>{{ space }}</span>
					</div>
					<!-- <div>{{ `${rili.阴历月}月${rili.阴历日}日` }}</div>
					 -->
					<div>{{ rili.戊日 ? rili.戊日 + '日' : '百无禁忌' }}</div>
				</div>
			</div>
			<div class="foo">
				<span class="dao">道</span>
				<span class="li">历</span>
				<div class="daoli_info">{{ `${rili.道历.toFullString()}` }}</div>
			</div>
			<div style="text-align: center">
				<!-- {{ rili.戊日 ? rili.戊日 + '日' : '百无禁忌' }} -->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Solar,
		Lunar,
		LunarUtil,
		Tao
	} from 'lunar-javascript'
	import {
		日历
	} from '../utils/index'
	/**
	 * {
	          date:null,
	          festivalName:"",
	          reason:""
	    }
	 */
	export default {
		data() {
			return {
				throwData: {
					festivals: []
				}
			}
		},
		props: {
			aday: {
				default: () => new Date()
			}
		},
		computed: {
			rili() {
				let d = new 日历(this.aday)
				this.throwData.festivals = d.道历.getFestivals()
				// console.log(this.throwData.festivals)
				for (var i = 0; i < this.throwData.festivals.length; i++) {
					console.log(this.throwData.festivals[i].getName())
				}
				return d
			},
			space() {
				let today = Solar.fromDate(new Date())
				let aday = Solar.fromDate(this.aday)
				let spaceNum = today.subtract(aday)
				if (spaceNum == 0) {
					return ''
				} else if (spaceNum > 0) {
					return `${spaceNum}天前`
				} else {
					return `${-spaceNum}天后`
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.daoli {
		// margin: 10px;
		width: 100%;
		// background-image: url('../static/水墨背景3.png');
		// background-size: cover;
		box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
		// box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: 240px;
		// border: 1px dashed blue;
		// margin: 10px;
		padding: 10px;
		box-sizing: border-box;

		.yue {
			width: 100%;
			height: 30px;
			text-align: center;
		}

		.ri {
			width: 100%;
			// height: 230px;
			// min-height: 200px;
			// flex-grow: 2;
			display: flex;
			position: relative;

			.xingqi {
				width: 5%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.nian {
				width: 5%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
			}

			.center {
				margin: 0px 50px 0px 50px;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.num {
					text-align: center;
					font-size: 44px;
					margin-bottom: 16px;
					position: relative;
					width: 100%;

					span {
						display: inline-block;
						position: absolute;
						right: 45px;
						bottom: 10px;
						font-size: 10px;
						color: gray;
						transform: scale(0.8);
					}
				}
			}
		}

		.foo {
			// border: 1px dashed #2f90b9;
			min-height: 80px;
			position: relative;
			display: flex;
			align-items: center;

			.dao {
				display: block;
				position: absolute;
				top: 10px;
				left: 0;
				margin-bottom: 10px;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #eb261a;
				text-align: center;
				line-height: 30px;
				color: aliceblue;
			}

			.li {
				display: block;
				position: absolute;
				top: 50px;
				left: 0;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #15231b;
				text-align: center;
				line-height: 30px;
				color: aliceblue;
			}

			.daoli_info {
				margin-left: 50px;
				margin-top: 13px;
			}
		}
	}
</style>
